<template>
	<scroll-view scroll-with-animation :style="{ backgroundColor: bgColor }"
		:class="['sunui-nav-bar flex-around', isCenter ? 'sunui-nav-center' : '']" :scroll-x="true"
		:show-scrollbar="false" :scroll-into-view="'tab-' + currentIndex">
		<view class="nav-item " :id="'tab-' + index"
			:style="{ width: size < 1 ? 'auto' : size + 'rpx', marginRight: margin + 'rpx', padding: '0rpx ' + padding }"
			v-for="(item, index) in result" :key="index" @click="navchang($event, item)" :data-index="index">
			<view :class="['nav-item-title', currentIndex == index ? 'nav-active' : '']" :style="{
					color: currentIndex == index ? activeColor : color,
					textAlign: textAlign,
					lineHeight: lineHeight,
					fontSize: currentIndex == index ? activeFontSize : fontSize,
					fontWeight: currentIndex == index ? activeFontWeight : ''
				}">
				{{ item.name }}
			</view>
			<view class="nav-active-line-wrap " :style="{ justifyContent: activeDirection }">
				<view class="nav-active-line " :class="[currentIndex == index && animatie ? 'sunui-nav-scale' : '']"
					:style="{ backgroundColor: activeLineBg, width: activeLineWidth, height: activeLineHeight, borderRadius: activeLineRadius }"
					v-if="currentIndex == index"></view>
			</view>
		</view>
	</scroll-view>
</template>
<script>
	export default {
		data() {
			return {
				result: []
			};
		},
		created() {
			let result = [];
			for (let item of this.items) {
				let {
					[this.keyId]: id, [this.keyName]: name
				} = item;
				result.push({
					id,
					name
				});
			}
			this.result = result;
		},
		props: {
			keyId: {
				type: String,
				default: 'id'
			},
			keyName: {
				type: String,
				default: 'name'
			},
			isCenter: {
				type: Boolean,
				default: false
			},
			currentIndex: {
				type: Number,
				default: 0
			},
			size: {
				type: Number,
				default: 120
			},
			fontSize: {
				type: String,
				default: '28rpx'
			},
			activeFontSize: {
				type: String,
				default: '28rpx'
			},
			items: {
				type: Array,
				default: function() {
					return [];
				}
			},
			activeLineBg: {
				type: String,
				default: 'linear-gradient(to right, #66BFFF,#3388FF)'
			},
			color: {
				type: String,
				default: '#333333'
			},
			activeColor: {
				type: String,
				default: '#333333'
			},
			activeLineHeight: {
				type: String,
				default: '6rpx'
			},
			activeLineWidth: {
				type: String,
				default: '36rpx'
			},
			activeLineRadius: {
				type: String,
				default: '0rpx'
			},
			activeDirection: {
				type: String,
				default: ''
			},
			activeFontWeight: {
				type: Number,
				default: 700
			},
			margin: {
				type: Number,
				default: 0
			},
			textAlign: {
				type: String,
				default: ''
			},
			lineHeight: {
				type: String,
				default: '50rpx'
			},
			padding: {
				type: String,
				default: '0rpx'
			},
			animatie: {
				type: Boolean,
				default: true
			},
			autoLeft: {
				type: String,
				default: ''
			},
			bgColor: {
				type: String,
				default: '#fff'
			}
		},
		methods: {
			// 修改新增item，获取id和name
			navchang: function(e, item) {
				this.$emit('change', Number(e.currentTarget.dataset.index), item.id);
			}
		}
	};
</script>
<style scoped>
	/deep/.uni-scroll-view-content {
		display: flex;
		justify-content: space-around;
	
	}

	/* #ifndef MP-ALIPAY */
	.sunui-nav-bar {
		width: 100%;
		display: flex;
		white-space: nowrap;
	}

	/* #endif */
	/* #ifdef MP-ALIPAY */
	.sunui-nav-bar {
		width: 100%;
		white-space: nowrap;
	}

	/* #endif */
	.nav-item {
		width: 100rpx;
		display: inline-flex;
		flex-direction: column;
	}

	.nav-item-title {
		width: 100%;
		color: #333333;
	}

	.nav-active {}

	.nav-active-line-wrap {
		display: flex;
	}

	.nav-active-line {
		margin-top: 5rpx;
	}

	.sunui-nav-center {
		justify-content: center;
		text-align: center;
	}

	@keyframes sunui-nav-scale {
		0% {
			transform: scale(0.1);
		}

		100% {
			transform: scale(1);
		}
	}

	.sunui-nav-scale {
		animation: sunui-nav-scale 300ms forwards;
	}
</style>